<template>
	<view>
		<view class="tit">活动类型</view>
		<view class="activity_list">
			<view class="items" v-for="(item, index) in data.typeList" :key="index" @click="changeType(item)" :class="item.active ? 'items_act' : ''">
				<view class="i1 flex">
					<image :src="item.icon" mode=""></image>
					{{ item.name }}
				</view>
				<view class="i2">{{ item.info }}</view>
				<view v-if="item.active" class="ads flex_jc_cent">
					<uni-icons type="checkmarkempty" color="#fff"></uni-icons>
				</view>
			</view>
		</view>
		<view class="tit">活动方式</view>
		<view class="activity_list">
			<view class="items flex" @click="changLine(2)" :class="params.lineType == 2 ? 'items_act' : ''">
				<image class="i4" src="/static/act3.png" mode=""></image>
				<view class="i3">
					<view class="i3_1">线下活动</view>
					<view class="i3_2">同城面对面，结识新朋友</view>
				</view>
				<view class="ads flex_jc_cent" v-if="params.lineType == 2">
					<uni-icons type="checkmarkempty" color="#fff"></uni-icons>
				</view>
			</view>
			<view class="items flex" @click="changLine(1)" :class="params.lineType == 1 ? 'items_act' : ''">
				<image class="i4" src="/static/act4.png" mode=""></image>
				<view class="i3">
					<view class="i3_1">线上活动</view>
					<view class="i3_2">线上会议，随时随地</view>
				</view>
				<view class="ads flex_jc_cent" v-if="params.lineType == 1">
					<uni-icons type="checkmarkempty" color="#fff"></uni-icons>
				</view>
			</view>
		</view>
		<view class="btn_zw"></view>
		<view class="bottom_btns">
			<view class="cont">
				<view @click="handleconfirm" :class="data.isShow ? 'active' : ''" class="onebtns flex_jc_cent">确认</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, watch } from 'vue';
import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';
import { getTypeAll } from '@/api/activity.js';
const data = reactive({
	typeList: [],
	isShow: false
});
const params = reactive({
	type: '',
	lineType: ''
});
// 正确的写法
watch(
	() => params.type, // 监听单个属性
	(newType, oldType) => {
		// newType 是变化后的值，oldType 是变化前的值
		console.log('类型从', oldType, '变为', newType);
		if (newType) {
			data.isShow = true;
		} else {
			data.isShow = false;
		}
	}
);
const changeType = (item) => {
	data.typeList.forEach((item) => {
		item.active = false;
	});
	item.active = true;
	params.type = item.name;
};
const changLine = (e) => {
	params.lineType = e;
};
const handleconfirm = () => {
	if (data.isShow) {
		uni.setStorageSync('activity', params);
		uni.navigateTo({
			url: '/mypage/usertabbar/createTemplate'
		});
	}
};
onLoad(() => {
	getTypeAll({}).then((res) => {
		if (res.code == 200) {
			data.typeList = res.data;
			data.typeList.forEach((item) => {
				item.active = false;
			});
		}
	});
});
</script>

<style lang="scss">
page {
	background: #f7f8f6;
}

.tit {
	width: 200rpx;
	height: 60rpx;
	background: linear-gradient(270deg, #f5f5f0 0%, #eee8d8 100%);
	border-left: 4rpx solid #75613e;
	font-family: PingFang SC, PingFang SC;
	font-weight: bold;
	font-size: 30rpx;
	color: #75613e;
	line-height: 60rpx;
	padding-left: 20rpx;
	box-sizing: border-box;
}
.activity_list {
	.items {
		width: 710rpx;
		height: 160rpx;
		background: linear-gradient(180deg, #ece6d5 0%, #f7f8f6 100%);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding: 20rpx 26rpx;
		box-sizing: border-box;
		margin: 20rpx auto;
		position: relative;
		border: 1px solid #f7f8f6;
		.i1 {
			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 20rpx;
			}
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #75613e;
		}
		.i2 {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #8f8f8b;
			margin-top: 22rpx;
		}
		.i4 {
			width: 120rpx;
			height: 120rpx;
		}
		.i3 {
			margin-left: 20rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;

			.i3_1 {
				font-size: 28rpx;
				color: #75613e;
			}
			.i3_2 {
				font-size: 24rpx;
				color: #8f8f8b;
				margin-top: 12rpx;
			}
		}
		.ads {
			width: 72rpx;
			height: 48rpx;
			background: #b19561;
			border-radius: 0rpx 20rpx 0rpx 20rpx;
			position: absolute;
			right: 0;
			top: 0;
		}
	}
	.items_act {
		border: 1px solid #b19561;
	}
}
</style>
